<template>
  <div class="layout flex">
    <div class="w-1/4 bg-green-200 px-1">
      <p>桌台区</p>
      <el-button :disabled="canCheck" icon="el-icon-circle-plus" size="small" type="primary" @click="setUp">开台
      </el-button>
      <el-card class="box-card mt-2" shadow="never">
        <div v-for="(d,index) in desks" :key="index"
        >
          <div
              :class="{active:selected==d.id,paid:onSaleDesks.some((on)=>on==d),border:!onSaleDesks.some((on)=>on==d)} "
              class="bg-gray-200 hovereffect border-dashed  border-light-blue-500
                relative flex shadow-sm p-1 my-1 cursor-pointer rounded"
              @click="checkItem(d)">
            <img :src="d.image" alt="" class="w-8 h-8 object-cover">
            <p class="text-sm">{{ d.name }}</p>
            <div v-if="onSaleDesks.some((on)=>on==d)"
                 class="bg-yellow-400 p-1 rounded font-bold shadow-sm text-white text-xs absolute top-0 right-1">
              已占用
            </div>
            <div v-else
                 class="bg-green-400 p-1 rounded  font-bold shadow-sm text-white text-xs absolute top-0 right-1">
              空闲
            </div>
          </div>

        </div>
      </el-card>
    </div>
    <div class="w-1/4 bg-yellow-200 px-1">
      <p>商品分类({{ currDesk.name }})</p>
      <div v-for="category in categories" :key="category.id" class="cursor-pointer" @click="checkcate(category)">
        <div class="p-2 bg-red-500 my-1">
          <span>{{ category.name }}</span>
        </div>
      </div>
    </div>
    <div class="w-1/4 bg-blue-200">
      <p>商品列表({{ currDesk.name }})</p>
      <div class="flex justify-end items-center">
        <span class="text-sm">快速搜索：</span>
        <xhp-product-search :keyword="keyword" :products="products" @update="update"></xhp-product-search>
      </div>

      <div v-if="currDesk.id">
        <el-table
            :data="products"
            size="mini"
            style="width: 100%">
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column v-model="product.price" label="单价" prop="perprice"></el-table-column>
          <el-table-column #default="{row:product}" label="操作" width="140">
            <el-input-number
                v-model="product.amount"
                :min="0"
                controls-position="right"
                size="mini"
                @change="updateOrder(product.amount,product)"></el-input-number>

          </el-table-column>
          <el-table-column #default="{row:product}" label="价格">
            {{ product.amount * product.perprice }}
            元

          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        请选择桌号
      </div>

    </div>
    <div class="w-1/4 bg-purple-200 px-1">
      <el-card class="box-card" shadow="never">
        <span>结算区({{ currDesk.name }})</span>

        <el-table
            v-if="filternopaiddesk.latestorderitems"
            :data="filternopaiddesk.latestorderitems"
            border
            size="mini"
            style="width: 100%">
          <el-table-column label="商品ID" prop="product_id"></el-table-column>
          <el-table-column label="单号" prop="order_id"></el-table-column>
          <el-table-column label="价格" prop="price"></el-table-column>
          <el-table-column label="数量" prop="amount"></el-table-column>

        </el-table>
        <div class="text-md my-2 font-bold">
          合计{{ sum }}元
        </div>
        <el-button type="success">结账</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

const orderitem = {amount: '', price: '', order_id: '', product_id: ''}

//nopaid paid debt
export default {
  data() {
    return {
      orderitem,
      orderproducts: [],
      amount: 0,
      currDesk: {},
      canCheck: true,
      keyword: '',
      desks: [],
      nopaidDesks: [],
      form: {},
      selected: 0,
      categories: [],
      products: [],
      filternopaiddesk: {},//返回当前选中未支付的桌台（其中包含了当前桌选购商品中最近一次的记录latestorderitems）
      sum: null
    }
  },
  computed: {
    onSaleDesks() {
      return this.desks.filter((desk) => this.nopaidDesks.some(no => no.id == desk.id))
    },

  },
  async created() {
    this.desks = await this.axios.get('admin/desk')//获取所有桌台
    this.categories = await this.axios.get('admin/category')//获取所有分类及菜品
    this.nopaidDesks = await this.axios.get('admin/order/nopaid')//获取未付桌台
  },
  methods: {
    async setUp() {
      await this.axios.post("admin/order", this.form)
    }
    ,
    clearorder() {
      this.product = {amount: '', price: '', order_id: '', product_id: ''}
    }
    ,
    checkItem(d) {
      //清除掉之前的选择
      this.clearorder()
      this.selected = d.id;

      this.currDesk = d;
      if (!this.onSaleDesks.some((on) => on == d)) {
        this.canCheck = false
      } else {
        this.canCheck = true
        this.filternopaiddesk = this.nopaidDesks.filter(item => item.desk_id == d.id)[0]
        this.form = {name: dayjs(new Date()).format('YYYYMMDDhhmmss'), desk_id: d.id}
        this.filternopaiddesk.latestorderitems.map(item => this.sum += item.price)

      }


    },
    checkcate(category) {
      this.clearorder()
      this.products = category.products
      const That = this
      if (this.filternopaiddesk.latestorderitems.length > 0) {
        this.products.map(function (prd) {
          That.filternopaiddesk.latestorderitems.map(function (f) {
            if (prd.id == f.product_id) {
              prd.amount = f.amount
            }
          })
        })
      }

    },
    update(products) {
      this.products = products.data
    },
    async updateOrder(value, product) {
      //需要好order_id
      if (!this.orderitem.order_id) {
        this.orderitem.order_id = this.nopaidDesks.filter(n => n.id == this.currDesk.id)[0].id
      }
      this.orderitem.product_id = product.id
      this.orderitem.amount = product.amount
      this.orderitem.price = product.amount * product.perprice
      const url = `admin/order/${this.orderitem.order_id}/orderdetail`
      await this.axios.post(url, this.orderitem)
    }
  }
}
</script>

<style scoped>
.layout {
  min-height: calc(100vh - 157px);
  display: block;
  width: auto;
  height: 100%;
  background: #ececec;
}

/*选中后的效果*/
.active {
  transform: scale(1.05);
  transition-duration: 5s;
  font-size: 20px;
}

.hovereffect:hover {
  transform: scale(1.03);
  transition-duration: 150ms;
  font-size: 20px;
}

.nopaid {
  background-color: yellow !important;
  font-size: 20px;
}

.paid {
  cursor: not-allowed;
  background: red !important;
}
</style>
<!--
1--流程一
  1）显示所有桌台，
  2）根据当前状态显示，显示不同状态的桌台，对应不同颜色。空闲：绿底，消费中：黄低，
  3）开台：消费中（nopaid）-》禁用，空闲(paid,debt)-》可用，已付-》可用
  4）消费展示：
2--状态

-->